<template>
  <zm-view ref="view" background="#F4F6F7" :scroll="false">
    <view v-if="isShowTabs" class="solid-top-2 bg-white">
      <zm-tabs v-model="tabKey" :list="tabs" text-key="name" value-key="key" sticky @change="handleTabChange"></zm-tabs>
    </view>
    <zm-list ref="list" @query="handleQuery">
      <view v-for="item in list" :key="item.orderId">
        <film-item v-if="tabKey == 'film'" :data="item" @refresh="onRefresh"></film-item>
        <goods-item v-if="tabKey == 'goods'" :data="item" @refresh="onRefresh"></goods-item>
        <mall-item v-if="tabKey == 'mall'" :data="item" @refresh="onRefresh"></mall-item>
        <recharge-item v-if="tabKey == 'recharge'" :data="item" @refresh="onRefresh"></recharge-item>
      </view>
    </zm-list>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import FilmItem from "./components/film-item/index"
import GoodsItem from "./components/goods-item/index"
import MallItem from "./components/mall-item/index"
import RechargeItem from "./components/recharge-item/index"
import { mapGetters } from "vuex"
export default {
  name: "order-list",
  components: {
    FilmItem,
    GoodsItem,
    MallItem,
    RechargeItem
  },
  mixins: [page],
  data() {
    return {
      init: false,
      tabs: [
        { name: "电影票", key: "film" },
        { name: "卖品", key: "goods" },
        { name: "商城", key: "mall" },
        { name: "充值", key: "recharge" }
      ],
      apis: {
        film: uni.$api.orderFilm.getOrderList,
        goods: uni.$api.goods.getOrderList,
        mall: uni.$api.mall.getOrderList,
        recharge: uni.$api.balance.getRechargeOrderList
      },
      tabKey: "film",
      hideTabs: false,
      list: []
    }
  },
  computed: {
    ...mapGetters(["personDeco"]),
    // 渠道类型,inner:内部渠道，outer:外部渠道,内部渠道只有电影票 tabKey默认为 film
    channelType() {
      return this.showTabs || this.personDeco?.config?.channelType
    },
    isShowTabs() {
      return this.hideTabs == false && this.channelType === "inner"
    }
  },
  onLoad(options) {
    this.hideTabs = !!options.hideTabs
    this.handleInit(options)
  },
  methods: {
    handleInit(options) {
      const index = this.tabs.findIndex((item) => item.key == options.type)
      if (index >= 0) {
        this.tabKey = options.type
      }
      // 延迟，避免修改tabKey马上触发handleTabChange
      setTimeout(() => {
        this.init = true
      }, 100)
    },
    handleTabChange() {
      if (this.init) {
        this.list = []
        this.$nextTick(() => {
          this.$refs.list.refresh()
        })
      }
    },
    async onRefresh() {
      this.list = []
      await this.$nextTick()
      this.$refs.list.refresh()
    },
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await this.apis[this.tabKey]?.({ page, pageSize })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
